<template>
    <div class='bot_nav_box'>
        <ul>
          <li>
            <router-link to='main'>
              <div class='iconfont icon-home'></div>
              <div>首页</div>
            </router-link>
          </li>
          <li>
            <router-link to='goodscategory'>
              <div class='iconfont icon-leimupinleifenleileibie2'></div>
              <div>分类</div>
            </router-link>
          </li>
          <li>
            <router-link to='cart'>
              <div class='iconfont icon-gouwuche'></div>
              <div>购物车</div>
            </router-link>
          </li>
          <li>
            <router-link to='user'>
              <div class='iconfont icon-user'></div>
              <div>个人</div>
            </router-link>
          </li>
        </ul>
    </div>
</template>
<script>
// @ is an alias to /src
export default {
    name: 'navBar',
    data() {
        return {
        
        }
    },
    components: {
        
    }
}
</script>
<style lang="less">
.bot_nav_box{
  position:relative;
  height: 50px;
  ul{
    position: fixed;
    background-color: #eeeeee;
    bottom:0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    text-align: center;
    li{
      flex:1;
      font-size:10px;
      .iconfont{
        font-size: 20px;
        color:#000
      }
      a{
        color:#000;
        text-decoration: none;
      }
      a.router-link-active{
        color:red;
          .iconfont{
            color:red
          }
      }
    }
  }
}
</style>